<template>
  <el-button>按模板打印</el-button>
  <el-button >mouse position:{{x}},{{y}}</el-button>
  <br><br>
  <el-button @click="xkprint('pdf')">导出pdf</el-button>
  <el-button @click="xkprint('print')">打印</el-button>
  <el-button @click="excelExport">导出excel</el-button>
  <el-button @click="customPrint">自定义打印</el-button>
  <el-button @click="previewPrint">打印预览</el-button>
  <el-button @click="saveData">savedata</el-button>
  <div id="templatePrint"></div>
</template>
<script setup>
import {useMouse} from "@/utils/mouse.js";
const {x,y}=useMouse();
import {onMounted} from 'vue';

import config from './config.json'
import data from './data.json'
import _onUpdateData from './onUpdateDataset_商品区域销售_商品季度销售.json'
import _onUpdateDatasetlist from './onUpdateDatasetList_商品区域销售.json'

let reportPrintData = _onUpdateData;
let spreadSheet
let reportPrint = null
const onUpdateData = (datasets, params) => {
  return new Promise((resolve, reject) => {
    console.log('..printTemplate...onUpdateData', _onUpdateData);
    resolve(_onUpdateData)
  })
}
const onUpdateDatasetList = () => {
  return new Promise((resolve, reject) => {
    console.log('..printTemplate...onUpdateDatasetList', _onUpdateDatasetlist);

    resolve(_onUpdateDatasetlist);
  })
}

const onQueryPlan = () => {
  return new Promise((resolve, reject) => {
    let list = [
      {
        "name": "queryName1",
        "plan": [
          {
            "name": "区域选择",
            "value": "上海",
            "styleType": 1
          }, {
            "name": "年度",
            "value": "2020",
            "styleType": 1
          }
        ]
      }
    ]
    resolve(list);
  })
}
const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  onUpdateData: onUpdateData,
  onUpdateDatasetList: onUpdateDatasetList,
  onQueryPlan: onQueryPlan
};
let reportPrintOptions = [
  {
    name: '查询面板1',
    print: config
  }
]
const _cb = (_data) => {
  console.log('cb.....,_data:', _data)
}
onMounted(() => {

  spreadSheet = XZReport("#templatePrint", option, config, data);
  spreadSheet.on("query-plan", (data, type, _cb) => {
    console.log("data:", data);
    console.log("type:", type);
    _cb('haha');
  })
  //spreadSheet.update(_onUpdateData)
  reportPrint = XZReportPrint();
  reportPrint.setTemplate(reportPrintOptions);

});

function xkprint(printmode) {
  //提供了两种打印方法, 表格实例直接调用即可
//  print 方法
// option 可选值  {mode:"print"}  print:直接打印 pdf:转pdf打印
  option.mode = printmode
  spreadSheet.print({mode: "print"});

// implicitPrint 方法   参数同 pivotData 方法
// data 传入二维数组是批量数据打印
// option 可选值  {mode:"print"}  print:直接打印 pdf:转pdf打印
// spreadSheet.implicitPrint(sheetConfig,data,option?)

}

function excelExport() {

// @param {*} options {fileName: 'download', // 下载文件名 exportHideCol: true, // 是否导出隐藏的行列 exportFormula: true, // 是否导出公式

  spreadSheet.exportExcel({fileName: 'excel1', exportHideCol: true, exportFormula: true})
}

function customPrint() {
  console.log("reportPrint.getTemplate---->", reportPrint.getTemplate);
  reportPrint.print(reportPrintData);
}

function previewPrint() {
  reportPrint.previewPrint(reportPrintData);
}

function saveData() {
  console.log(spreadSheet.datas[0].rows);

  //console.log(spreadSheet.data.rows);
}
</script>

<style scoped>

</style>
